<style type="text/css">
	.resize {
		margin-bottom: 15px;
		border: 1px solid lightgrey;
		height: 500px;
		width: 100%
	}

	.ace_editor {
		width: 100%;
		height: 100%;
	}

	.selectorDropdown {
		float: left;
		margin-right: 5px;
		margin-bottom: 15px;
	}

	.actionButtons {
		float: right;
		margin-left: 5px;
	}

	.section-button {
		max-height: 500px;
		overflow-y: auto;
	}
	/* http://stackoverflow.com/questions/17206631/why-are-bootstrap-tabs-displaying-tab-pane-divs-with-incorrect-widths-when-using fixes timeline drawing at default width while tab is hidden */

	.tab-content>.tab-pane {
		display: block;
		height: 0;
		overflow-y: hidden;
		overflow-x: hidden;
	}

	.tab-content>.active {
		height: auto;
	}

	#configSaveModal .modal-dialog {
		width: 50%;
	}

	.popover {
		max-width: 600px;
		outline: none !important;
	}
</style>
<label class="selectorDropdown" style="margin-right:15px;">Jump to:</label>
<div class="row">
	<div class="dropdown selectorDropdown" ng-repeat="(type,list) in items">
		<button class="btn btn-primary btn-xs dropdown-toggle" type="button" id="itemSelector" data-toggle="dropdown">
			{{ type }} <i class="fa fa-caret-down"></i>
		</button>
		<ul class="dropdown-menu section-button" role="menu">
			<li role="presentation"><a tabindex="-1" role="menuitem" target="_blank" ng-href="{{sectionToDocs[type]}}">
				{{ type }} Documentation <i class="fa fa-external-link"></i></a>
			</li>
			<li class="divider"></li>
			<li role="presentation" ng-repeat="item in list | orderBy:'toString()'"><a role="menuitem" tabindex="-1" ng-click="scrollTo(type,item);">{{item}}</a></li>
		</ul>
	</div>
	<div class="btn btn-default btn-xs" ng-show="quickJumpTarget" ng-bind="quickJumpTarget" ng-click="quickJump()"></div>
	<div class="btn btn-default btn-xs actionButtons" data-toggle="modal" data-target="#configSaveModal" ng-click="diffConfig()"
	 ng-if="saveEnabled">Save</div>
	<div class="btn btn-default btn-xs actionButtons" ng-click="validate()">Validate</div>
	<div class="btn btn-default btn-xs actionButtons" ng-click="downloadConfig()">Download</div>
</div>
<div class="row" ng-show="validationResult">
	<div class="col-lg-12">
		<div class="alert alert-dismissible" ng-class="validationResult == 'Valid' ? 'alert-success' : 'alert-danger'" ng-bind="validationResult">
			<button type="button" class="close" ng-click="validationResult=''"><span>&times;</span></button>
		</div>
	</div>
</div>
<div class="row" ng-show="saveResult">
	<div class="col-lg-12">
		<div class="alert" ng-class="saveClass()">{{saveResult}}
			<button ng-show="saveClass() != 'alert-warning'" type="button" class="close" ng-click="saveResult=''"><span>&times;</span></button>
		</div>
	</div>
</div>
<div class="row" ng-show="runningChanged" ng-if="saveEnabled">
	<div class="col-lg-12">
		<div class="alert alert-danger">The running configuration has been changed since you started editing.
			<div style="outline: none;" class="pull-right" data-placement="bottom" data-title="Help" data-content="{{runningChangedHelp}}"
			 bs-popover><span class="fa fa-question"></span></div>
		</div>
	</div>
</div>
<div class="row" ng-show="runningHashResult" ng-if="saveEnabled">
	<div class="col-lg-12">
		<div class="alert alert-warning">{{runningHashResult}}
			<button type="button" class="close" ng-click="runningHashResult=''; getRunningHash()"><span>&times;</span></button>
		</div>
	</div>
</div>
<div class="row">
	<div tsresizable on-resize="editor.resize()" class='resize'>
		<div ui-ace="{ onLoad : aceLoaded, mode: aceMode, theme: aceTheme, advanced: { fontSize: '14px', fontFamily: 'Menlo, Monaco, Consolas, monospace' }}"
		 ng-model="config_text"></div>
	</div>
</div>
<div class="row">
	<div class="col-lg-12">
		<form class="form-inline">
			<div class="form-group">
				<label class="control-label">From</label>
				<input type="text" class="form-control" style="width:9em" ng-model="fromDate" ng-change="setInterval()" placeholder="yyyy-mm-dd"
				 bs-datepicker data-date-format="yyyy-MM-dd" data-date-type="string">
				<input type="text" class="form-control" style="width:9em" ng-model="fromTime" ng-change="setInterval()" placeholder="HH:MM">
			</div>
			<div class="form-group">
				<label class="control-label">To</label>
				<input type="text" class="form-control" style="width:9em" ng-model="toDate" ng-change="setInterval()" placeholder="yyyy-mm-dd"
				 bs-datepicker data-date-format="yyyy-MM-dd" data-date-type="string">
			</div>
			<div class="form-group">
				<input type="text" class="form-control" style="width:9em" ng-model="toTime" ng-change="setInterval()" placeholder="HH:MM">
			</div>
			<div class="form-group">
				<label class="control-label">Intervals</label>
				<input type="number" min="2" step="1" style="width:7em" class="form-control" ng-model="intervals" ng-change="setInterval()"
				 ng-disabled="!fromDate || !toDate" tooltip title="Number of evaluations between timespan.">
			</div>
			<div class="form-group">
				<label class="control-label">Step Duration (m)</label>
				<input type="number" min="1" step="1" style="width:7em" class="form-control" ng-model="duration" ng-change="setDuration()"
				 ng-disabled="!fromDate || !toDate" tooltip title="Step duration in minutes between intervals.">
			</div>

		</form>
	</div>
</div>
<div class="row" style="margin-bottom:15px;">
	<div class="col-lg-12">
		</p>
		<form class="form-inline">
			<div class="form-group">
				<label class="control-label">Email</label>
				<input type="email" class="form-control" style="width:20em" ng-model="email">
			</div>
			<div class="form-group">
				<label class="control-label">Template Group</label>
				<input type="text" class="form-control" style="width:20em" ng-model="template_group" tooltip title="Set which result to use for the template by setting an opentsdb group (aka tagset) in the format of k=v,m=o. The first result for which the specified group is a subset of a result is used. If no results are a subset of the specified group, then the first result is chosen.">
			</div>
			<div class="form-group">
				<label class="control-label">Incident Id</label>
				<input type="number" class="form-control" style="width:10em" ng-model="incidentId" tooltip title="Incident Id to use for preview notifications">
			</div>
			<div class="form-group">
				<button class="btn btn-primary" ng-click="test()">Test {{selected_alert}}</button>
    			<i class="fa fa-question-circle-o fa-lg" tooltip title="Notice: some alerts might not be shown in case their status is 'unknown'"></i>
			</div>
		</form>
	</div>
</div>
<div class="row" ng-show="running">
	<div class="col-lg-12">
		<div class="alert alert-info">
			Running...
		</div>
	</div>
</div>
<div class="row" ng-repeat="error in errors">
	<div class="col-lg-12">
		<pre class="alert alert-danger" ng-bind="error" style="white-space: pre-wrap;"></pre>
	</div>
</div>
<div class="row" ng-show="warning.length > 0">
	<div class="col-lg-12" ng-repeat="w in warning track by $index">
		<div class="alert alert-warning" ng-bind="w"></div>
	</div>
</div>

<ul class="nav nav-tabs">
	<li ng-class="{active: tab == 'results'}"><a href ng-click="tab = 'results'">Results</a></li>
	<li ng-class="{active: tab == 'template'}"><a href ng-click="tab = 'template'">Template</a></li>
	<li ng-class="{active: tab == 'timeline'}"><a href ng-click="tab = 'timeline'">Timeline</a></li>
	<li ng-class="{active: tab == 'notifications'}"><a href ng-click="tab = 'notifications'">Notifications</a></li>
	<li ng-class="{active: tab == 'anotifications'}"><a href ng-click="tab = 'anotifications'">Action Notifications</a></li>
</ul>

<div class="tab-content">
	<div class="tab-pane" ng-class="{active: tab == 'timeline'}">
		<div ng-if="tab == 'timeline' && fromDate && toDate">
			<div class="row">
				<div class="col-lg-12 timeline" ts-time-line></div>
			</div>
			<div class="row">
				<div class="panel-group" ng-repeat="entry in entries" ng-init="name = entry.key; a = entry.value">
					<div class="panel panel-default">
						<div class="panel-heading panel-title" ng-click="collapse('group' + $index)">
							<span ng-bind="name"></span>
							<span class="pull-right" ng-bind="a.History.length + ' events'"></span>
						</div>
						<div class="panel-body" ng-if="shown['group' + $index]">
							<div class="panel-group">
								<div class="panel" ng-class="panelClass(v.Status)" ng-repeat="v in a.History">
									<div class="panel-heading" ng-click="collapse('panel' + $parent.$index + '-' + $index,entry,v)" id="{{'panel' + $parent.$index + '-' + $index}}">
										<h4 class="panel-title">
											<a href>
												<span ng-bind="name + ': ' + v.Status"></span>
												<span class="pull-right" ng-show="v.Time" ts-time="v.Time" ts-end-time="v.EndTime" no-link="true"></span>
											</a>
										</h4>
									</div>
									<div class="panel-body" ng-if="shown['panel' + $parent.$index + '-' + $index]">
										<div ng-show="!v.doneLoading">Loading...</div>
										<div class="row" ng-show="v.error">
											<div class="col-lg-12">
												<pre class="alert alert-danger" ng-bind="v.error" style="white-space: pre-wrap;"></pre>
											</div>
										</div>
										<div class="panel panel-default">
											<div class="panel-heading">
												<h3 class="panel-title">Subject</h3>
											</div>
											<div class="panel-body template" ng-bind="v.subject"></div>
										</div>
										<div class="panel panel-default">
											<div class="panel-heading">
												<h3 class="panel-title">Body</h3>
											</div>
											<div class="panel-body template" ng-bind-html="v.body"></div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="tab-pane" ng-class="{active: tab == 'template'}">
		<div class="panel panel-default">
			<div class="panel-heading">
				<h3 class="panel-title">Subject</h3>
			</div>
			<div class="panel-body template" ng-bind="subject"></div>
		</div>
		<div class="panel panel-default">
			<div class="panel-heading">
				<h3 class="panel-title">Body</h3>
			</div>
			<div class="panel-body template" ng-bind-html="body"></div>
		</div>
		<div class="panel panel-default" ng-if="emailSubject">
			<div class="panel-heading">
				<h3 class="panel-title">Email Subject</h3>
			</div>
			<div class="panel-body template" ng-bind="emailSubject"></div>
		</div>
		<div class="panel panel-default" ng-if="emailBody">
			<div class="panel-heading">
				<h3 class="panel-title">Email Body</h3>
			</div>
			<div class="panel-body template" ng-bind-html="emailBody"></div>
		</div>
		<div class="panel panel-default" ng-repeat="(name, bod) in customTemplates">
			<div class="panel-heading">
				<h3 class="panel-title">{{name}}</h3>
			</div>
			<div class="panel-body template" ng-bind-html="bod"></div>
		</div>
		<h4>Available Variables</h4>
		<pre ng-bind="data"></pre>
	</div>
	<div class="tab-pane" ng-class="{active: tab == 'results'}">
		<div class="row">
			<div class="col-sm-6">
				<table class="table">
					<thead>
						<tr>
							<th>Time</th>
							<th>Criticals</th>
							<th>Warnings</th>
							<th>Normals</th>
						</tr>
					</thead>
					<tbody>
						<tr ng-repeat="set in sets">
							<td>
								<a href="#" ng-bind="set.Time" ng-click="scrollToInterval($index)"></a>
							</td>
							<td ng-bind="set.Critical || ''" ng-class="set.Critical ? 'danger' : ''"></td>
							<td ng-bind="set.Warning || ''" ng-class="set.Warning ? 'warning' : ''"></td>
							<td ng-bind="set.Normal || ''" ng-class="set.Normal ? 'success' : ''"></td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
		<div class="row" ng-repeat="set in sets">
			<div class="col-sm-12">
				<h4 id="time-{{$index}}">
					Time: {{set.Time}}
					<small>criticals: {{set.Critical}}, warnings: {{set.Warning}}, normals: {{set.Normal}}</small>
					<button class="btn btn-default btn-sm" ng-hide="set.Results" ng-click="show(set)" ng-bind="set.Show || 'show'" ng-disabled="set.Show"></button>
				</h4>
				<table class="table" ng-show="set.Results">
					<thead>
						<tr>
							<th>Group</th>
							<th>Status</th>
							<th>Expression</th>
							<th>Result</th>
							<th>Computations</th>
						</tr>
					</thead>
					<tbody ng-repeat="r in set.Results" ng-init="result = r.Result; group = r.Group">
						<tr>
							<td rowspan="2" ng-bind="zws(group)" ng-click="setTemplateGroup(group)"></td>
							<td rowspan="2" ng-bind="result.Status" ng-class="panelClass(result.Status, '')"></td>
							<td ng-if="result.Crit">critical</td>
							<td ng-if="result.Crit">
								<pre ng-bind="json(result.Crit.Value)" ng-show="result.Crit"></pre>
							</td>
							<td ng-if="result.Crit" ts-computations="result.Crit.Computations"></td>
						</tr>
						<tr ng-if="result.Warn">
							<td>warning</td>
							<td>
								<pre ng-bind="json(result.Warn.Value)" ng-show="result.Warn"></pre>
							</td>
							<td ts-computations="result.Warn.Computations"></td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>
	<div class="tab-pane" ng-class="{active: tab == 'notifications'}">
		<div style='margin-top:10px;'>
			<div class="panel panel-default" ng-repeat="(name, dat) in notifications">
				<div class="panel-heading">
					<h3 class="panel-title">{{name}}</h3>
				</div>
				<div class="panel-body">
					<notification dat="dat"></notification>
				</div>
				<div ng-hide="notifications" class='col-md-12'>
					<h4>No Notifications</h4>
				</div>
			</div>
		</div>
	</div>

	<div class="tab-pane" ng-class="{active: tab == 'anotifications'}">
		<div style='margin-top:10px;'>
			
			<div class="dropdown selectorDropdown" style="float:none;margin-bottom:10px;" ng-if="actionNotifications">
				<button class="btn btn-primary btn-xs dropdown-toggle" type="button" data-toggle="dropdown">
						{{notificationToShow}} <i class="fa fa-caret-down"></i>
					</button>
					<ul class="dropdown-menu section-button" role="menu">
						<li role="presentation" ng-repeat="(n, ats) in actionNotifications"><a role="menuitem" tabindex="-1" ng-click="setNotificationToShow(n)">{{n}}</a></li>
					</ul>
			</div>
			<div ng-repeat="(n, ats) in actionNotifications">
				<div class="panel panel-default" ng-if="n==notificationToShow" ng-repeat="(at, dat) in ats">
					<div class="panel-heading">
						<h3 class="panel-title">{{n}} {{at}}</h3>
					</div>
					<div class="panel-body">
						<notification dat="dat"></notification>
					</div>
					<div ng-hide="notifications" class='col-md-12'>
						<h4>No Notifications</h4>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="modal fade" id="configSaveModal" tabindex="-1" role="dialog">
		<div class="modal-dialog modal-admin" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					<h4 class="modal-title" id="myModalLabel">Save Configuration</h4>
				</div>
				<div class="modal-body">
					<div class="form-horizontal">
						<div class="form-group">
							<label class="col-sm-2 control-label">Username</label>
							<div class="col-sm-6">
								<username-input></username-input>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label">Message</label>
							<div class="col-sm-6">
								<textarea rows="10" class="form-control" ng-model="message"></textarea>
							</div>
						</div>
					</div>
				</div>
				<div>
					<pre ng-bind="diff"></pre>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-primary" ng-click="diffConfig()">Refresh Diff</button>
					<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
					<button type="button" class="btn btn-primary" ng-class="runningChanged == true ? 'alert-warning' : ''" data-dismiss="modal"
					 ng-click="saveConfig()" title="This will save and reload the config if the config is valid. If the config is not valid (or if the Diff has changed since viewing it) the config will not be saved and a reload will not happen. If this button is yellow (warning) then the running config has changed since you started editing on the rule page - be careful not to overwrite other's changes.">Save and Reload</button>
				</div>
			</div>
		</div>
	</div>